// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  transformers: [transformerDirectives()],
  content: {
    pipeline: {
      include: [/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/],
    },
  },
  presets: [presetUno(), presetAttributify(), presetIcons()],
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['flex-col', 'flex flex-col'],
    ['absolute-lt', 'absolute left-0 top-0'],
    ['absolute-lb', 'absolute left-0 bottom-0'],
    ['absolute-rt', 'absolute right-0 top-0'],
    ['absolute-rb', 'absolute right-0 bottom-0'],
    ['absolute-center', 'absolute-lt f-c-c wh-full'],
    ['text-ellipsis', 'truncate'],
    ['b-s-1', 'border-1 border-solid'],
  ],
  rules: [
    // [/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
    [
      /^bg-(.*)$/,
      ([, c], { theme }: any) => {
        const whiteList = ['white', 'black', 'transparent']
        if (theme.colors[c] && typeof theme.colors[c] === 'string' && !whiteList.includes(c)) {
          return { 'background-color': `rgba(${theme.colors[c]}, var(--un-bg-opacity))` }
        }
      },
    ],
    [
      /^text-(.*)$/,
      ([, c], { theme }: any) => {
        const whiteList = ['white', 'black', 'transparent']
        if (theme.colors[c] && typeof theme.colors[c] === 'string' && !whiteList.includes(c)) {
          return { color: `rgba(${theme.colors[c]}, var(--un-text-opacity))` }
        }
      },
    ],
    [
      /^border-(.*)$/,
      ([, c], { theme }: any) => {
        const whiteList = ['white', 'black', 'transparent']
        if (theme.colors[c] && typeof theme.colors[c] === 'string' && !whiteList.includes(c)) {
          return { 'border-color': `rgba(${theme.colors[c]}, var(--un-border-opacity))` }
        }
      },
    ],
    [
      /^b-(.*)$/,
      ([, c], { theme }: any) => {
        const whiteList = ['white', 'black', 'transparent']
        if (theme.colors[c] && typeof theme.colors[c] === 'string' && !whiteList.includes(c)) {
          return { 'border-color': `rgba(${theme.colors[c]}, var(--un-border-opacity))` }
        }
      },
    ],
  ],
  theme: {
    colors: {
      dark: '#18181c',
    },
  },
})
